<template>
    <div class="main-con">
        <div class="left_main">
            <leftMenu />
        </div>
        <div class="rightMain">
            <!-- 用户 -->
            <div class="r_main">
                <div class="swiperB">
                    <div v-for="item in banner" :key="item.id" @click="gourl(item.url)" style="cursor: pointer;">
                        <img :src="item.image" alt="">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <div class="tabIn">
                    <div class="tab">
                        <span class="title" style="flex-shrink: 0;white-space: nowrap;">资源库</span>
                        <div v-for="item in tabList" :key="item.id" @click="getTabId(item.id)">
                            <span :class="{ actives: item.id == curId }">{{ item.name }}</span>
                            <div class="botLine">
                                <span :class="{ active: item.id == curId }"></span>
                            </div>
                        </div>
                    </div>
                    <div class="search">
                        <input type="text" placeholder="搜资源库" placeholder-class="pla" v-model="keyword"
                            @keyup.enter="goSearch">
                        <img src="@/assets/img/search.svg" alt="" @click="goSearch()" style="cursor: pointer;">
                    </div>
                </div>
                <div class="form_con">
                    <div class="outer">
                        <div class="list" v-for="(item, index) in list" :key="index"
                            @click="goPage('/resourceIndex', item.id)">
                            <div class="img">
                                <img :src="item.image" alt="">
                            </div>
                            <p class="line2"><b>
                                    【{{ item.name }}】
                                </b>{{ item.intro }}</p>
                            <div class="bom">
                                <div class="y2">
                                    <i class="iconfont">&#xe611;</i>
                                    <span>{{ item.saves }}</span>
                                </div>
                                <!-- <div class="y2">
                                    <i class="iconfont">&#xe640;</i>
                                    <span>0</span>
                                </div> -->

                                <div class="y2">
                                    <i class="iconfont">&#xe61e;</i>
                                    <span>{{ item.views }}</span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <el-empty description="没有内容了" v-if="list.length == 0"></el-empty>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import leftMenu from '../leftmenu';

export default {
    components: {
        leftMenu
    },
    data() {
        return {
            dialogVisible: false,
            form: { type: '' },
            tabList: [],
            curId: 0,
            banner: [],
            list: [], // 问答 专栏列表
            totalPage: 1,
            pageNum: 1,
            loading: false,
            keyword: ''
        }
    },
    mounted() {
        this.getLibrary()
        this.getList()
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件

    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    methods: {
        // 点击跳转外部链接
        gourl(url) {
            if (url) {
                window.open(url, '_blank', 'noopener,noreferrer');
            }
        },
        goSearch() {
            this.list = []
            this.pageNum = 1
            this.getList()
        },

        getList() {
            this.loading = true
            let params = {
                page: this.pageNum,
                tid: this.curId,
                keyword: this.keyword
            }

            this.$api.getLibs(params).then(res => {
                let response
                if (res.data.code == 1) {
                    this.totalPage = res.data.data.last_page
                    this.list = this.list.concat(res.data.data.data);
                    this.loading = false
                }

            })
        },

        // 社群互动
        getLibrary() {
            this.$api.getLibrary().then(res => {
                if (res.data.code == 1) {
                    this.banner = res.data.data.banner
                    this.tabList = [{ id: 0, name: '全部' }, ...res.data.data.cate]
                    console.log(this.tabList, 2131312)

                }
            })
        },

        getTabId(t) {
            this.curId = t
            this.pageNum = 1
            this.list = []
            this.getList()
        },
        onSubmit() {
            console.log('submit!', this.form);
        },
        goPage(url, id) {
            if (id) {
                // 另页打开
                const route = this.$router.resolve({
                    path: url,
                    query: { id }
                });
                window.open(route.href, '_blank');
            }
        },
        load() {
            console.log("处理触底");

        },
        onsubmit() {
            console.log(this.form);

        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                this.load()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.left_main {
    width: 300px;
}

.outer {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.dialog-header {
    font-weight: bold;
    font-size: 22px;
}

.dialog-footer {
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        margin: 0 50px;
        width: 140px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        padding: 0;
    }
}

.list {
    cursor: pointer;
    width: 309px;
    margin-right: 14px;
    margin-bottom: 80px;
    border-radius: 10px;
    overflow: hidden;

    &:nth-child(4n) {
        margin-right: 0;
    }

    .img {
        width: 309px;
        height: 309px;
        justify-content: center;
        align-items: center;
        display: flex;
        background-color: #E5E5E5;
        flex-direction: column;
        border-radius: 10px;
        overflow: hidden;

        img {
            width: 309px;
            height: 309px;
            object-fit: cover;
        }

        i {
            font-size: 100px;
            color: #999;
            border: 1px dashed #999;
            margin-bottom: 39px;
        }

        span {
            font-weight: 400;
            font-size: 24px;
            color: #666666;
        }
    }

    >p {
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        margin: 24px 0 20px;
        height: 55px;
    }

    .bom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .y2 {
            padding: 0 10px;

            >div {
                display: flex;
                align-items: center;
            }

            i {
                font-size: 16px;
                margin-right: 5px;
            }

            span {
                font-size: 14px;
                color: #999;
            }
        }

        .collect {
            font-weight: 400;
            font-size: 16px;
            color: #999999;
        }
    }
}

.rightMain {
    flex: 1;
    border-top: 0.05rem solid #E8E8E8;

    .top {
        padding: 1.1rem 1.04rem;
        height: 4.17rem;
        display: flex;
        align-items: center;
        background-color: #1068E7;
        width: 100%;

        strong {
            font-weight: bold;
            font-size: 1.50rem;
            color: #FFFFFF;
            line-height: 1.97rem;
            font-family: Microsoft YaHei;
        }

        span {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 1.15rem;
            color: #FFFFFF;
            margin-left: 1.35rem;
        }
    }

    .r_main {
        width: 100%;


        .tabIn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 23px 0;
            background-color: #fff;
            position: sticky;
            top: 98px;
            z-index: 99;

            .tab {
                display: flex;
                align-items: center;


                .title {
                    font-weight: bold;
                    font-size: 1.46rem;
                    color: #000000;
                    white-space: nowrap;

                    margin-right: 30px;
                }

                >div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 55px;
                    cursor: pointer;
                    position: relative;
                    font-size: 1.15rem;


                    .actives {
                        font-weight: bold;
                        color: #1068E7;
                    }

                    .botLine {
                        width: 100%;
                        height: 3px;
                        box-sizing: content-box;
                        position: relative;
                        top: calc(100% + 13px);
                        position: absolute;
                        left: 0;
                        right: 0;

                        >span {
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: inline-block;
                            width: 0;
                            height: 3px;
                            background-color: #1068E7;
                            border-radius: 3px;
                        }

                        .active {
                            animation: expandWidth .5s forwards;
                        }

                        @keyframes expandWidth {
                            0% {
                                width: 0;
                            }

                            100% {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .search {
                margin-left: 4.4rem;
                position: relative;
                width: 280px;
                height: 48px;
                display: flex;
                align-items: center;

                img {
                    width: 23px;
                    height: 23px;
                    position: absolute;
                    top: calc(50% - 11px);
                    right: 11px;
                }

                input {
                    width: 280px;
                    height: 48px;
                    outline: none;
                    background: #F6F6F6;
                    border-radius: 1.25rem;
                    padding: 0 3rem 0 1.2rem;
                    box-sizing: border-box;
                    font-size: 1rem;
                    border: none;
                    border: 1px solid #F6F6F6;

                    &:focus {
                        border: 1px solid #1068E7;
                    }
                }

                .pla {
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #666666;
                }
            }
        }

        .form_con {
            min-height: 500px;
            // overflow-y: auto;
        }
    }
}

.swiperB {
    display: flex;
    align-items: centers;
    height: 366px;

    >div {
        width: 50%;
        margin-right: 18px;
        position: relative;

        >span {
            position: absolute;
            top: calc(50% - 20px);
            left: 30px;
            font-size: 34px;
            font-weight: bold;
            color: #fff;
        }

        &:last-child {
            margin-right: 0;
        }

        img {
            width: 100%;
            height: 366px;
            // object-fit: contain;
            background-color: #000000;
        }
    }
}

@media screen and (max-width:768px) {
    .left_main {
        display: none;
    }

    .main-con {
        width: 100%;
    }

    .swiperB {
        height: 400px;
        flex-direction: column;

        >div {
            height: 50%;
            margin: 0;
            width: 100%;

            img {
                height: 200px;
                width: 100%;
            }

            >span {
                font-size: 18px;
                line-height: 25px;
                top: calc(50% - 12px);
            }
        }
    }

    .rightMain {
        .r_main {
            .tabIn {
                flex-direction: column-reverse;
                align-items: flex-start;

                .search {
                    margin: 0;
                    width: 100%;
                    height: 48px;
                    padding: 10px;

                    input {
                        width: 100%;
                        font-size: 12px;
                        height: 28px;
                        padding-right: 10px;
                        line-height: 28px;
                    }

                    img {
                        width: 15px;
                        height: 15px;
                        top: calc(50% - 7px);
                        right: 15px;
                    }
                }

                .tab {
                  
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    flex-wrap: wrap;
.title{
    font-size: 14px;
}
                    >div {
                        margin: 5px 8px 8px;
                        font-size: 14px;
                        &:first-child {
                            margin-left: 0;
                        }

                        &:last-child {
                            margin-right: 0;
                        }

                        >div {
                            white-space: nowrap;
                        }
                    }

                    .fu {
                        display: none;
                    }
                }
            }
        }
    }
    .outer{
        padding:  0 10px;
      .list{
        margin: 5px 0;
        border: 1px solid #ccc;
            border-radius: 10px;
        padding: 10px;
        width: 100%;
        height: 140px;
        display: flex;
        position: relative;
        .img{
            flex-shrink: 0;
            width: 120px;
            height: 120px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        >p{
            font-size: 14px;
            margin-left: 10px;
            max-height: 80px;
            line-height: 20px;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            height: auto !important;
        }
        .bom{
            position: absolute;
            bottom: 10px;
            left: 140px;
            width: calc(100% - 140px);
            justify-content: flex-start;
            .y2{
                margin-right: 10px;
                span{
                    font-size: 12px;

                }
                i{
                    font-size: 12px;
                    margin-right: 5px;
                }
            }
        }
      }  
    }
}
</style>